"use client";

import dynamic from "next/dynamic";
import Image from "next/image";
import { Dropdown } from "antd";
import { LogoutOutlined } from "@ant-design/icons";

const ProLayout = dynamic(
  () => import("@ant-design/pro-components").then((com) => com.ProLayout),
  { ssr: false }
);

export default function Page() {
  return (
    <div className="h-full overflow-auto">
      <ProLayout
        title="自助终端机后台管理系统"
        logo={
          <Image
            width={40}
            height={40}
            src="/logo.svg"
            alt="log"
            style={{ width: "24px", height: "auto" }}
            priority
          />
        }
        avatarProps={{
          src: "https://gw.alipayobjects.com/zos/antfincdn/efFD%24IOql2/weixintupian_20170331104822.jpg",
          title: "用户名",
          render: (_props, dom) => {
            return (
              <Dropdown
                menu={{
                  items: [
                    {
                      key: "logout",
                      icon: <LogoutOutlined />,
                      label: "退出登录",
                    },
                  ],
                }}
              >
                {dom}
              </Dropdown>
            );
          },
        }}
      ></ProLayout>
    </div>
  );
}
